<template>
	<div class="app-container">
		<el-form :model="data.info" :rules="data.rules" label-width="120px" class="w-1/2" ref="ruleFormRef">

			<el-form-item :label="$t('system.api.userName') + ':'" prop="auth_name">
				<el-input v-model="data.info.auth_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('public.password') + ':'" prop="auth_password">
				<el-input v-model="data.info.auth_password" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('system.api.whitelist') + ':'" prop="white_list">
				<el-input v-model="data.info.white_list" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.api.statusMachine') + ':'" prop="callback_url"
				v-if="route.query.typePage == 'add'">
				<el-input v-model="data.info.callback_url" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { getaddApi, getUpdate } from '@/api/system-api';
import { onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
let ruleFormRef = ref<any>();
let router = useRouter()
let route = useRoute()
let data = reactive({
	info: { // 主体信息
		auth_name: '',
		auth_password: '',
		white_list: '',
		callback_url: ''
	},
	rules: { // 表单验证
		auth_name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		auth_password: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		white_list: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' }
	}
})

onMounted(() => {
	if (route.query.typePage == 'update') {
		let info = JSON.parse(decodeURI(route.query.l)).info
		data.info.auth_name = info.auth_name
		data.info.auth_password = info.auth_password
		data.info.white_list = info.white_list
	}
})
// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			if (route.query.typePage == 'update') {
				let info = JSON.parse(decodeURI(route.query.l)).info
				data.info.id = info.id
				getUpdate(data.info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						});
						router.back()
						return;
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					});
				})
			}
			if (route.query.typePage == 'add') {
				getaddApi(data.info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						});
						router.back()
						return;
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					});
				})
			}
		}
	})
}

// 取消
let cancell = () => {
	router.push({ path: '/system/api/index' })
	for (let key in data.info) {
		if (key != 'status') {
			data.info[key] = ''
		}
	}
	data.info.status = 1
	router.back()
}

</script>